<!DOCTYPE html>
<html>
	<head>		
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
				/* 图片脱离文档流--文字包含在图片周边 */
			float: left; 
			margin-right: 70px;  /* 图片与文字连接处有间隙*/
			margin-bottom: 70px; /* 图片与文字连接处有间隙*/
			}
			
			p{
				font-size: 16px;  /* 页面默认字体尺寸*/
				line-height: 20px; /* 浮动文字，行高无法设定*/
				word-spacing: 5px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/blue.jpg" alt="蓝天" width="270px" height="210px">
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat eligendi hic alias ut inventore provident temporibus enim velit et officiis officia, adipisci iusto tempora. Voluptates accusantium vel libero? Sapiente, ratione?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium asperiores dolore repellat a assumenda saepe itaque commodi inventore. Molestias quia, assumenda voluptates sed mollitia autem aliquam molestiae consequatur deserunt atque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure cupiditate nesciunt dicta fugiat voluptas possimus esse quia. Autem quam nostrum aperiam officia odit enim quasi rem cum, alias similique facere!</p>
	</body>
</html>